<template>
  <div v-if="visible" :class="[$style.cusDialog, {[$style.shrink]:shrink}]" :style="{width, ...position}" @dblclick.stop="magHandle">
    <div v-show="!shrink">
      <div :class="$style.header" @click.stop>
        <p :class="$style.title">{{ title }}</p>
        <div :class="$style.icon">
          <svg-icon icon-class="jianshao-line" @click.native="zoomHandle"></svg-icon>
          <svg-icon icon-class="cuowuguanbiquxiao-line_1" @click.native="closeHandle"></svg-icon>
        </div>
      </div>
      <div :class="$style.content" @click.stop>
        <slot></slot>
      </div>
    </div>
    <div v-show="shrink" :class="$style.shrinkText" @mousedown="mousedownHandle">
      <p>{{ title }}<br>双击展开</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Dialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '60vw'
    }
  },
  data() {
    return {
      shrink: false,
      top: '50%',
      left: '50%',
      Mtop: 'calc(100vh - 80px)',
      Mleft: 'calc(100vw - 80px)'
    }
  },
  computed: {
    position() {
      return {
        top: this.top,
        left: this.left
      }
    }
  },
  watch: {
    visible(v) {
      if (!v) {
        this.top = '50%'
        this.left = '50%'
      } else {
        document.body.appendChild(this.$el)
      }
    },
    shrink(v) {
      if (v) {
        this.top = this.Mtop
        this.left = this.Mleft
      } else {
        this.top = '50%'
        this.left = '50%'
      }
    }
  },
  created() {
    window.addEventListener('mouseup', this.removeMoveHandle)
    try {
      let v = localStorage.getItem('dialogTopLeft')
      if (v) {
        v = JSON.parse(v)
        this.Mtop = v.Mtop
        this.Mleft = v.Mleft
      }
    } catch (e) {
      console(e)
    }
  },
  beforeDestroy() {
    window.removeEventListener('mouseup', this.removeMoveHandle)
    if (this.$el && document.body.querySelector(`.${this.$style.cusDialog}`)) {
      document.body.removeChild(this.$el)
    }
  },
  methods: {
    closeHandle() {
      this.$emit('update:visible', false)
      this.$emit('closed')
    },
    zoomHandle() {
      this.shrink = true
    },
    magHandle() {
      this.shrink = false
    },
    mousedownHandle(e) {
      // const el = this.$el
      window.addEventListener('mousemove', this.mouseMoveHandle)
    },
    removeMoveHandle(e) {
      window.removeEventListener('mousemove', this.mouseMoveHandle)
    },
    mouseMoveHandle(e) {
      const { clientX, clientY } = e
      this.top = clientY + 'px'
      this.left = clientX + 'px'
      this.Mtop = this.top
      this.Mleft = this.left
      localStorage.setItem('dialogTopLeft', JSON.stringify({
        Mleft: this.Mleft,
        Mtop: this.Mtop
      }))
    }
  }
}
</script>
<style lang="scss" module>
.cusDialog{
  position: fixed;
  transform: translate(-50%,-50%);
  z-index: 99999999;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0 ,0 , 0.07), 0 1px 5px 0 rgba(0 ,0 ,0 ,0.1);
  box-sizing: border-box;
  user-select: none;
  .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    padding: 20px 20px 10px;
    .title{
      margin: 0;
    }
    .icon{
      &>svg{
        color: #909399;
        fill: #909399;
        font-size: 16px;
        cursor: pointer;
        // width: 24px;
        // height: 24px;
      }
      svg+svg{
        margin-left: 10px;
      }
    }
  }
  .content{
    padding: 16px;
  }
  .shrinkText{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    overflow: hidden;
    &>p{
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &>span{
    }
  }
}
.shrink{
  // transform: none;
  transition: all 0.15s;
  width: 60px !important;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0px 0px 4px 4px rgba(0, 0 ,0 , 0.5);
  background-color: rgba(22,188,131,0.6);
  color: #fff;
  cursor: pointer;
}
</style>
